<template>
  <div class="mainApp">
    <div class="tableShow">
      <div class="layout_list">
        <div
          class="item"
          v-for="(item, index) in layout"
          :key="item.index"
          :data-index="item.index"
          :class="{ active: item.classOff }"
          :style="{
            transform: `translate(${item.x}, ${item.y}) scale(${item.scale})`,
          }"
          @click="onChangePage(index)"
        >
          <chart-module
            :chartsList="chartsList[index]"
            v-if="chartsList[index].data.length > 0"
          ></chart-module>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const chartModule = () => import('@c/chartModule/chartModule')

import { ChartsModule } from '@h/apiUrl'

export default {
  name: 'index',
  components: {
    chartModule,
  },
  data() {
    return {
      layout: [
        {
          x: '-33%',
          y: '-33.6%',
          scale: '0.33',
          classOff: false,
        },
        {
          x: '-33%',
          y: '0',
          scale: '0.33',
          classOff: false,
        },
        {
          x: '-33%',
          y: '33.6%',
          scale: '0.33',
          classOff: false,
        },
        {
          x: '32.6%',
          y: '0',
          scale: '1',
          classOff: true,
        },
      ],

      chartsList: [
        {
          data: [
            {
              test: '00',
            },
          ],
          type: 'chart-pie-line',
        },
        {
          data: [
            {
              test: '11',
            },
          ],
          type: 'chart-scatter',
        },
        {
          data: [],
          type: 'chart-column',
        },
        {
          data: [
            {
              test: '22',
            },
          ],
          type: 'chart-map',
        },
      ],
    }
  },
  created() {},
  mounted() {
    const _this = this
    _this.init()
  },
  methods: {
    init() {
      const _this = this
      // _this.dataTEMP()
    },

    // 获取体温数据
    dataTEMP() {
      const _this = this
      _this.$ajaxs.get(
        ChartsModule.TEMP,
        {},
        (res) => {
          // console.log('dataTEMP', res);
          let data = res.data
          if (data.length > 0) {
            _this.chartsList.map((val, index, arr) => {
              if (val.type == 'chart-column') {
                val.data = [...data]
              }
              return val
            })
            // _this.chartsList[].data = [...data];

            // _this.$set( _this.chartsList[3], 'data', data )
          }
        },
        (err) => {}
      )
    },

    onChangePage(idx) {
      const _this = this
      let _layout = this.layout
      let temp = {}
      if (_layout[idx].classOff) return

      for (let i = 0; i < _layout.length; i++) {
        if (_layout[i].classOff) {
          temp = _layout[i]
          _layout[i] = _layout[idx]
        }
      }
      _this.$set(_layout, idx, temp)
    },
  },
}
</script>

<style scoped lang="scss">
@import 'index.scss';
</style>
